Intro

Simple JSON viewer

Simple JSON viewer built 100% in toddle. 

Demo

data
  • name"toddle"
    • type"company"
      • employees
        • 0
          • name"Andreas"
          • 1
            • name"Kasper"
            • 2
              • name"Erik"
              • 3
                • name"Jacob"
                • 4
                  • name"Vakis"
                  • 5
                    • name"Marija"
                    • 6
                      • name"Miguel"
                      • 7
                        • name"Christian"

                      Components

                      • simple-json-viewer

                        Display JSON data

                        data
                        • 0"Andreas"
                          • 1"Kasper"
                            • 2"Erik"
                              • 3"Jacob"
                                • 4"Vakis"
                                  • 5"Marija"
                                    • 6"Miguel"
                                      • 7"Christian"

                                        Attributes

                                        default-expanded(Default = false)  Expand all fields by default
                                        key(Optional) The name or label of the data you want to display
                                        default-expanded(Required) The parsed json data

                                        Events

                                        selectFired when a user selects a key in the json data

                                      Style variables

                                      simple-json-viewer-key-colorColor for the json viewer keys
                                      simple-json-viewer-string-colorColor for string values
                                      simple-json-viewer-number-colorColor for number values
                                      simple-json-viewer-null-colorColor for null values
                                      simple-json-viewer-boolean-colorColor for boolean values
                                      simple-json-viewer-hover-bgItem :hover background color
                                      simple-json-viewer-hover-group-bgIgroup :hover background color
                                      simple-json-viewer-font-sizeFont size